<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "../common.ftl">
</head>
<body class="childrenBody">
<form class="layui-form layuimini-form" style="width:100%;">
    <div class="layui-form-item layui-card">
        <div class="layui-form-item layui-row layui-col-xs12">

            <div class="layui-card-header" style="font-weight: bold">邀请链接</div>
            <div class="layui-card-body">
                <input type="text" class="layui-input"
                       name="inviteUrl" id="inviteUrl" placeholder="邀请链接...">
            </div>
<#--            <button class="btn" data-clipboard-target="#inviteUrl">-->
<#--                复制链接-->
<#--            </button>-->
            <button style="margin-left: 20px;" class="js-clipboard layui-btn layui-btn-normal layui-btn-sm" data-clipboard-target="#inviteUrl">
                复制链接
            </button>
        </div>
    </div>

</form>


<script type="text/javascript" src="${ctx.contextPath}/public/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="${ctx.contextPath}/public/lib/clipboard-dist-2.0.0/clipboard.min.js"></script>
<script>
    layui.use(['layer', 'element'],function(){
        var layer = parent.layer === undefined ? layui.layer : top.layer;

        var clipboard = new ClipboardJS(".js-clipboard");
        clipboard.on('success', function(e) {
            console.info(e)
            layer.msg('复制成功',{
                icon: 6
            })
        });
        clipboard.on('error', function(e) {
            console.info(e)
            layer.msg('复制失败', {
                icon: 5
            })
        });
    });
</script>
</body>
</html>